<template>
  <div class="divBox">
    <!-- 机构一览 -->
    <div class="div3">
      <div class="topBox3">
        <div  class="topBox2">机构一览</div>
        <div class="topBox3_sou">
          <el-select
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>

      <div class="conBox3">
        <div
          class="conBoxList"
          v-for="(item, index) in conBox3List"
          :key="index"
          :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
        >
          <div class="conBox3_3">
            <div>{{ item.jigou }}</div>
            <!-- 机构评星 -->
            <div class="pinxin">
              <el-rate v-model="value2" :colors="colors"> </el-rate>
            </div>
          </div>
          <div class="conBox3_2">
            <div>单位性质</div>
            <div>{{ item.xinzhi }}</div>
          </div>
          <div class="conBox3_2">
            <div>所在城市</div>
            <div>{{ item.chenshi }}</div>
          </div>
          <div class="conBox3_2">
            <div>经营内容</div>
            <div>{{ item.jigou2 }}</div>
          </div>
        </div>
      </div>

      <!-- 更多页 -->
      <div class="genduobox">
        <el-button type="primary" plain round
          ><span>查看更多</span><i class="el-icon-right"></i
        ></el-button>
      </div>
    </div>
    <!-- 机构一览end -->

    <!-- 行政公示 、 评价标准 -->
    <div class="div3 div4">
      <!-- 行政公示 -->
      <div class="xingzhengbox">
        <div class="topBox3">
          <div class="topBox2">行政公示</div>
        </div>
        <div class="conBox3">
          <div
            class="conBoxList"
            v-for="(item, index) in conBox3List"
            :key="index"
            :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
          >
            <div class="conBox4_1">
              <div>{{ item.time }}</div>
              <div>{{ item.text }}</div>
            </div>
          </div>
        </div>
        <!-- 更多页 -->
        <div class="genduobox">
          <el-button type="primary" plain round
            ><span>查看更多</span><i class="el-icon-right"></i
          ></el-button>
        </div>
      </div>
      <!-- 评价标准 -->
      <div class="biaozhunbox">
        <div class="topBox3">
          <div class="topBox22">评价标准</div>
        </div>
        <div class="conBox3">
          <div
            class="conBoxList2"
            v-for="(item, index) in conBox4List"
            :key="index"
            :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
          >
            <div class="conBox4_2">
              <div>{{ item.name2 }}</div>
              <div>{{ item.fenshu }} 分</div>
            </div>
          </div>
        </div>
        <!-- 更多页 -->
        <div class="genduobox">
          <el-button type="primary" plain round
            ><span>查看更多</span><i class="el-icon-right"></i
          ></el-button>
        </div>
      </div>
    </div>
    <!-- 行政公示 、 评价标准end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      // 评星
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      // 机构一览
      // 搜索
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      // 列表
      conBox3List: [
        {
          id: "0",
          name2: "依法办学",
          fenshu: "60",
          jigou: "新东方培训机构",
          jigou2: "英语培训、语文培训...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "学校",
          chenshi: "南京",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议"
        },
        {
          id: "1",
          name2: "依法办学",
          fenshu: "60",
          jigou: "学而思",
          jigou2: "计算机培训、钢琴培训...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "学校",
          chenshi: "南京",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议"
        },
        {
          id: "2",
          name2: "依法办学",
          fenshu: "60",
          jigou: "优学教育",
          jigou2: "音乐培训、语文培训...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "学校",
          chenshi: "南京",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议"
        },
        {
          id: "3",
          name2: "依法办学",
          fenshu: "80",
          jigou: "起航教育",
          jigou2: "作文培训、奥数培训...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "学校",
          chenshi: "南京",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议"
        },
        {
          id: "4",
          name2: "依法办学",
          fenshu: "90",
          jigou: "卓越教育",
          jigou2: "语文培训、数学培训...",
          name: "李教授",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          xinzhi: "学校",
          chenshi: "北京",
          text:
            "这些天,由人民日报新媒体发起的“你好2021”温暖之夜演出活动视频,持续在短视频平台和社交平台上引发热议"
        }
      ],
      // 机构一览 end
      conBox4List: [
        {
          id: "0",
          name2: "章程",
          fenshu: "1"
        },
        {
          id: "1",
          name2: "证件",
          fenshu: "3"
        },
        {
          id: "2",
          name2: "收费",
          fenshu: "2"
        },
        {
          id: "3",
          name2: "招生广告",
          fenshu: "2"
        },
        {
          id: "4",
          name2: "行为规范",
          fenshu: "2"
        },
        {
          id: "5",
          name2: "经费",
          fenshu: "2"
        },
        {
          id: "6",
          name2: "校址校舍",
          fenshu: "15"
        },
        {
          id: "7",
          name2: "教学设备",
          fenshu: "3"
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 机构项目信息一栏
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  /* min-height: 100vh; */
  padding: 1% 5% 10% 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
 padding-top: 57px
}
.div3 {
  /* position: relative; */
  background: #fff;
  width: 100%;
  /* min-height: 220px; */
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.sousuoBox {
  margin-left: 10px;
}
.conBoxList {
  display: flex;
  align-items: center;
  min-height: 60px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.biecolor1 {
  background: #f9f9f9;
}
.biecolor2 {
  background: #fff;
}
.conBoxList > div {
  flex: 1;
  text-align: center;
  /* margin-top: 0 !important;
  margin-bottom: 0 !important; */
}
.conBox3_3 {
  flex: 1.5;
}
.conBox3_3 > :nth-child(1),
.conBox3_3 > :nth-child(2) {
  text-align: left;
}
/* 分数 */
.conBox3_1 {
  flex: none !important;
  width: 50px;
  height: 30px;
  border: 1px solid rgb(79, 131, 243);
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #2276c3;
}
.conBox3_2 > :nth-child(1) {
  color: rgb(153, 153, 153);
}
.conBox3_3 > :nth-child(2) {
  color: rgb(153, 153, 153);
}
.genduobox {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.el-button {
  height: 30px !important;
  line-height: 30px;
  padding: 0 10px !important;
  font-size: 14px !important;
  text-align: center;
}
.el-button.is-round {
  padding: 0 10px !important;
}

.div4 {
  /* margin-bottom: 150px; */
  background: transparent !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.div4 > div {
  background: #fff;
  border-radius: 4px;
}
.xingzhengbox {
  flex: 2;
  margin-right: 16px;
}
.biaozhunbox {
  flex: 1;
}
.conBox4_1 {
  text-align: left !important;
}

.conBoxList2 {
  min-height: 37.5px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.conBox4_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.conBox4_2 > :nth-child(2) {
  color: #2276c3;
}
.topBox3_sou{
  position: absolute; right: 0; margin-right: 6%;
}
/* 搜索 */
.topBox3_sou>>>.el-input__inner{
  height: 30px !important;
  line-height: 32px !important;
}
/* 搜索 end */
.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h1-bg.png) no-repeat;
    /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
.topBox22 {
  padding: 0 10px;
  width: 100%;
  height: 49px;

  background: url(../../../static/img/h1-bg.png) no-repeat;
    /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  /* position: absolute; */
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
  margin-left: -5%;
}
</style>
